<template>
  <VisitNav :show="2"></VisitNav>
  <view class="visit-container">
    <view class="visit-header">
      <view class="visit-search-input-box">
        <view class="visit-search-input-icon">
          <image src="/static/visit/search.png"></image>
        </view>
        <input
          class="visit-search-input"
          type="text"
          placeholder="请输入患者姓名/身份证号/手机号"
          v-model="keyword"
          @confirm="search"
          confirm-type="search"
        />
      </view>
      <view class="visit-search-button">
        <button type="primary" @tap="search" class="visit-button">搜索签约患者</button>
      </view>
    </view>
    <view class="visit-body">
      <scroll-view
        class="visit-patient-list"
        @scrolltolower="lowerBottom"
        scroll-y
        :show-scrollbar="false"
      >
        <view class="visit-patient-box">
          <view
            class="visit-patient-item"
            v-for="(patient, index) in patientList"
            :key="index"
            @tap="toAddVisit(patient)"
          >
            <view class="visit-patient-item-header"></view>
            <view class="visit-patient-item-firstrow">
              <view class="firstrow-item">姓名：{{ patient.name }} </view>
              <view class="firstrow-item">年龄：{{ patient.age }}岁</view>
            </view>
            <view class="visit-patient-item-firstrow">
              <view class="firstrow-item">性别：{{ patient.sex }}</view>
              <view class="firstrow-item">
                人群：
                <view class="patient-tag">{{ patient.disease }}</view>
              </view>
            </view>
            <view class="visit-patient-item-secondrow">
              <view class="firstrow-item">联系电话：{{ patient.phoneNumber }}</view>
            </view>
            <view class="visit-patient-item-secondrow">
              <view class="firstrow-item">地址：{{ patient.address }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import VisitNav from './VisitNav.vue'
import { ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/http'
import { useMemberStore } from '@/stores/modules/member'
import { useVisitStore } from '@/stores/modules/visit'
interface Patient {
  id: number //患者id
  doctorId: number //医生id
  name: string //患者姓名
  sex: string //患者性别
  age: string //患者年龄
  address: string //患者地址
  idNumber: string //患者身份证
  phoneNumber: string //患者电话
  sign: number //是否签约
  signHome: number //家庭签约
  homeId: number //家庭档案户主id
  createTime: string //创建档案的时间
  signTime: string //签约时间
  signYears: number //签约年限
  disease: string //疾病
}
const patientList = ref<Patient[]>()
const page = ref(1)
//是否显示日期筛选
const pageSize = ref(12)
const keyword = ref('')
const doctorStore = useMemberStore()
const visitStore = useVisitStore()

//搜索病人列表
const search = () => {
  console.log(keyword.value)
  http<Patient>({
    url:
      '/visit/getSignPatient?doctorId=' +
      doctorStore.profile.doctorInfo.id +
      '&keyword=' +
      keyword.value +
      '&page=' +
      page.value +
      '&pageSize=' +
      pageSize.value,
    method: 'GET',
  }).then((res: any) => {
    if (page.value == 1) {
      patientList.value = res.data
    } else {
      if (patientList.value) {
        patientList.value = [...patientList.value, ...res.data]
      } else {
        patientList.value = res.data
      }
    }
  })
}

//滑到底部触发（下拉刷新）
const lowerBottom = () => {
  page.value = page.value + 1
  search()
}

watch(
  () => keyword.value,
  (newVal, oldVal) => {
    console.log(newVal, oldVal)
    page.value = 1
  },
)

//跳转到新增随访页面
const toAddVisit = (patient: Patient) => {
  visitStore.setPatient(patient)
  uni.navigateTo({ url: '/pages/index/visit/components/AddVisit' })
}

onLoad(() => {
  search()
})
</script>

<style scoped lang="scss">
.visit-container {
  position: relative;
  background-color: #f4f4f4;
}
.visit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15rpx;
  padding: 0 15rpx;
  width: 100%;
  height: 45rpx;
  background-color: #fff;
  .visit-search-input-box {
    display: flex;
    align-items: center;
    height: 32rpx;
    flex: 1;
    padding: 0 20rpx;
    background-color: #f5f5f5;
    border-radius: 5rpx;
    .visit-search-input-icon {
      width: 15rpx;
      height: 15rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10rpx;
    }
    .visit-search-input {
      flex: 1;
      border: none;
      outline: none;
      background-color: transparent;
      width: 100%;
      height: 100%;
    }
    image {
      width: 13rpx;
      height: 13rpx;
    }
  }
}

.visit-body {
  width: 100%;
  height: calc(100vh - 105rpx);
  margin-top: 10rpx;
  overflow: auto;
  padding: 0 15rpx;
  .visit-patient-list {
    width: 100%;
    .visit-patient-box {
      display: grid;
      gap: 12rpx 10rpx;
      grid-template-columns: repeat(4, 1fr);
      .visit-patient-item {
        background-color: #fff;
        height: 110rpx;
        width: 100%;
        padding: 0rpx 0;
        border-radius: 5rpx;
        .visit-patient-item-header {
          width: 100%;
          height: 8rpx;
          background-color: #06d9f5;
          background: #fff radial-gradient(#06dbf5, #02abf3);
          border-radius: 5rpx;
        }
        .visit-patient-item-firstrow {
          margin-top: 6rpx;
          padding: 0 14rpx;
          display: flex;
          justify-content: space-between;
          .firstrow-item {
            display: flex;
            font-size: 11rpx;
            .patient-tag {
              max-width: 55rpx;
              padding: 0 3rpx;
              border-radius: 2rpx;
              height: 15rpx;
              overflow: hidden;
              color: #1ab1ff;
              border: 1rpx solid #1ab1ff;
            }
          }
        }
        .visit-patient-item-secondrow {
          margin-top: 6rpx;
          padding: 0 14rpx;
          .firstrow-item {
            color: #61666d;
            font-size: 11rpx;
          }
        }
      }
      .visit-patient-item-text {
        font-size: 12rpx;
        color: #333333;
      }
    }
  }
}

.visit-search-button {
  margin-left: 10rpx;
  .visit-button {
    background-color: #06d9f5;
    background: #fff radial-gradient(#06dbf5, #02abf3);
  }
}
</style>
